<template>
	<div class="page u-rela">
		<div class="page-content u-p-0">
			<div class="title">请选择性别</div>
			<div class="desc">选定之后无法修改</div>
			<div class="option u-flex u-row-between">
				<span :class="gender===2?'active':''"  @click="eventOption(2)">女生</span>
				<span :class="gender===1?'active':''"  @click='eventOption(1)'>男生</span>
			</div>

			<div class="u-flex u-row-center">
				<image v-if="gender===0" class="isnext" src="../../../src/static/images/right-arrow0.png" mode="widthFix">
				</image>
				<image v-else class="isnext" src="../../../src/static/images/right-arrow1.png" mode="widthFix" @click.stop="handleNext"></image>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'userGender', // 页面名称
		components: {}, // 挂载组件
		props: {}, // 组件传值
		data() {
			return {
				gender: 0,// 0 未知 1 男生 2 女生
				is_next: false // 下一步
			}
		},
		computed: {}, // 计算机属性 类似与data概念
		watch: {}, // 监控data中数据变化
		created() {}, // 生命周期-创建完成(可以访问当前this实例)
		mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
		methods: {
			eventOption(gender){
				this.gender = gender
			},
            // 下一步
            handleNext(){
                this.$store.commit('user/setRegUser', {
                    gender:this.gender
                })

                uni.reLaunch({
                    url: '/subPages/other/userDetail',
                })
            }
		}, // 挂载一些方法
		onLoad(options) {
         //   this.$showLoading('等待中...')
		}, // 生命周期回调—监听页面加载
		onShow() {

		}, // 生命周期回调—监听页面显示
		onReady() {}, // 生命周期回调—监听页面初次渲染完成
		onHide() {}, // 生命周期回调—监听页面隐藏
		onUnload() {}, // 生命周期回调—监听页面卸载
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		background: $u-type-primary !important;
		font-family: FZHei-B01S;
		height: 100%;
	}

	.page {
		position: relative;
		color: #FFFFFF;
		width: 100%;
        height: 100vh;
        background-image: url(/static/img/home_bg.ee2bc89f.png);
        background-size: cover;
        background-repeat: no-repeat;
        padding: 18px 15px 0;
		.page-content {
			width: 60%;
			margin: auto;
			text-align: center;
			margin-top: 200rpx;
			background: none;

			&>div {
				line-height: 80rpx;
			}
		}

		.option {
			margin-top: 200rpx;

			&>span {
				border: 2rpx solid #ffffff;
				padding: 40rpx 50rpx;
				border-radius: 20rpx;
				font-size: 31.25rpx;
			}

			.active {
				background: url("../../../src/static/images/gender_active.png") no-repeat center center;
				background-size: cover;
				border-color: transparent;
			}


		}

		.title {
			font-size: 37.5rpx;
		}

		.desc {
			font-size: 25rpx;
		}

		.isnext {
			width: 120rpx;
			height: 120rpx;
			position: absolute;
			bottom: 300rpx;
		}
	}

</style>
